/*
 * @Author: viivLgr 
 * @Date: 2018-06-06 15:09:45 
 * @Last Modified by: viivLgr
 * @Last Modified time: 2018-06-07 15:44:47
 */
import React   from 'react';
import Product from 'service/product-service.jsx';
import Util    from 'util/util.jsx';

const _product  = new Product();
const _util     = new Util();

import './category-selector.scss';

// 品类选择器
class CategorySelector extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            firstCategoryList   : [],
            firstCategoryId     : 0,
            secondCategoryList  : [],
            secondCategoryId    : 0  
        }
    }
    componentDidMount(){
        this.loadFirstCategory();
    }
    componentWillReceiveProps(nextProps){
        let categoryIdChange = this.props.categoryId !== nextProps.categoryId,
            parentCategoryIdChange = this.props.parentCategoryId !== nextProps.parentCategoryId;
        // 数据没有发生变化的时候，不做处理
        if(!categoryIdChange && !parentCategoryIdChange){
            return;
        }
        // 只有一级品类
        if(nextProps.parentCategoryId === 0){
            this.setState({
                firstCategoryId: nextProps.categoryId,
                secondCategoryId: 0
            });
        }
        // 有两级品类
        else {
            this.setState({
                firstCategoryId: nextProps.parentCategoryId,
                secondCategoryId: nextProps.categoryId
            }, () => {
                parentCategoryIdChange && this.loadSecondCategory();
            })
        }
    }
    // 加载一级分类
    loadFirstCategory(){
        _product.getCategoryList().then(res => {
            this.setState({
                firstCategoryList : res
            });
        }, errMsg => {
            _util.errorTips(errMsg);
        })
    }
    // 加载二级分类
    loadSecondCategory(){
        _product.getCategoryList(this.state.firstCategoryId).then(res => {
            this.setState({
                secondCategoryList : res
            });
        }, errMsg => {
            _util.errorTips(errMsg);
        })
    }
    // 选择一级品类
    onFirstCategoryChange(e){
        if(this.props.readOnly){
            return;
        }
        let newValue = e.target.value || 0;
        this.setState({
            firstCategoryId: newValue,
            secondCategoryId: 0,
            secondCategoryList: []
        }, () => {
            // 更新二级品类
            this.loadSecondCategory();
            this.onPropCategoryChange();
        });
    }
    // 选择二级品类
    onSecondCategoryChange(e){
        if(this.props.readOnly){
            return;
        }
        let newValue = e.target.value || 0;
        this.setState({
            secondCategoryId: newValue
        }, () => {
            this.onPropCategoryChange();
        });
    }
    // 传给父组件选中的结果
    onPropCategoryChange(){
        // 判断是不是有props里面的回调函数
        let categoryChangable = typeof this.props.onCategoryChange === 'function';
        // 如果是有二级品类
        if(this.state.secondCategoryId){
            categoryChangable 
            && this.props.onCategoryChange(this.state.secondCategoryId, this.state.firstCategoryId);
        }else{
            // 如果只有一级品类
            categoryChangable 
            && this.props.onCategoryChange(this.state.firstCategoryId, 0);
        }
    }
    render() {
        return (
            <div className="col-md-10">
                <select className="form-control cate-select"
                    readOnly={this.props.readOnly}
                    value={this.state.firstCategoryId}
                    onChange={e => this.onFirstCategoryChange(e)}
                >
                    <option value="">请选择一级分类</option>
                    {
                        this.state.firstCategoryList.map((item, index) => (
                            <option key={index} value={item.id}>{item.name}</option>
                        ))
                    }
                </select>
                {this.state.secondCategoryList.length ? (
                    <select className="form-control cate-select"
                        readOnly={this.props.readOnly}
                        value={this.state.secondCategoryId}
                        onChange={e => this.onSecondCategoryChange(e)}
                    >
                        <option value="">请选择二级分类</option>
                        {
                            this.state.secondCategoryList.map((item, index) => (
                                <option key={index} value={item.id}>{item.name}</option>
                            ))
                        }
                    </select>
                ) : null}
                
            </div>
        );
    }
}

export default CategorySelector;